window.onload = async () => {
	// 发请求
	const res = await axios({
		method: 'get',
		url: '/dashboard',
	})
	console.log(res)
	// 解构数据
	const { overview, year, salaryData, groupData, provinceData } = res.data
	for (let k in overview) {
		document.querySelector(`[name="${k}"]`).innerHTML = overview[k]
	}
	// 薪资结构
	function salaryEcharts(year) {
		const myEcharts = echarts.init(document.getElementById('line'))
		const option = {
			// 标题部分的设置
			title: {
				text: '2021全学科薪资走势',
				top: '2%',
				left: '3%',
			},
			// 图表
			grid: {
				// 设置上下左右的间隙
				top: '15%',
				left: '10%',
				right: '10%',
				bottom: '10%',
			},
			// x轴的设置
			xAxis: {
				type: 'category',
				data: year.map(item => item.month), // 箭头行数 一行代码 省略 {} return
				// x轴线段设置
				axisLine: {
					// 线段的样式
					lineStyle: {
						// 类型 虚线
						type: 'dashed',
						// 颜色
						color: '#d3d3d3',
					},
				},
				// x轴文本设置
				axisLabel: {
					// 颜色
					color: 'black',
				},
			},
			// y轴的设置
			yAxis: {
				type: 'value',
				// 分割线
				splitLine: {
					// 线的样式
					lineStyle: {
						type: 'dashed', // 类型
						// width:20, // 宽度
						color: 'deepskyblue', // 颜色
					},
				},
			},
			color: ['#5f8eff'],
			// 提示框 设置了才会出现
			tooltip: {
				show: true,
			},
			series: [
				{
					data: year.map(item => item.salary),
					type: 'line',
					// 圆圈
					smooth: true,
					// 圆圈大小
					symbolSize: 10,
					// 线宽
					lineStyle: {
						width: 8,
					},
					// 区域颜色
					areaStyle: {
						// 渐变
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: '#aed4ff', // 0% 处的颜色
								},
								{
									offset: 0.7,
									color: '#ffffff', // 100% 处的颜色
								},
							],
							global: false, // 缺省为 false
						},
					},
				},
			],
		}
		myEcharts.setOption(option)
	}
	salaryEcharts(year)
	// 薪资分布
	function salaryClassEcharts(salaryData) {
		const myEcharts = echarts.init(document.getElementById('salary'))
		const option = {
			title: {
				text: '班级薪资分布',
				top: '2%',
				left: '3%',
			},
			tooltip: {
				trigger: 'item',
			},
			// 图例
			legend: {
				bottom: '5%',
				left: 'center',
			},
			// 颜色
			color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
			series: [
				{
					name: '薪资分布',
					type: 'pie',
					radius: ['60%', '80%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2,
					},
					label: {
						show: false,
						position: 'center',
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '40',
							fontWeight: 'bold',
						},
					},
					labelLine: {
						show: false,
					},
					data: salaryData.map(item => {
						return {
							value: item.g_count + item.b_count,
							name: item.label,
						}
					}),
					// [
					// 	{ value: 1048, name: 'Search Engine' },
					// 	{ value: 735, name: 'Direct' },
					// 	{ value: 580, name: 'Email' },
					// 	{ value: 484, name: 'Union Ads' },
					// 	{ value: 300, name: 'Video Ads' },
					// ],
				},
			],
		}
		myEcharts.setOption(option)
	}
	salaryClassEcharts(salaryData)
	// 组员薪资
	function salaryGroup(groupData) {
		const myEcharts = echarts.init(document.getElementById('lines'))
		const option = {
			// x轴设置
			xAxis: {
				type: 'category',
				data: groupData.map(item => item.name),
				// 线段设置
				axisLine: {
					// 线的样式
					lineStyle: {
						type: 'dashed',
						color: '#d4d4d6',
					},
				},
			},
			yAxis: {
				type: 'value',
				// 分割线设置
				splitLine: {
					// 线的样式
					lineStyle: {
						type: 'dashed',
						color: '#d4d4d6',
					},
				},
			},
			// 颜色
			color: [
				// 渐变
				{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: '#34d29a', // 0% 处的颜色
						},
						{
							offset: 1,
							color: '#d4f5ea', // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
				{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: '#499fed', // 0% 处的颜色
						},
						{
							offset: 1,
							color: '#d8eafb', // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			],
			series: [
				// 柱状图 给多个图形,会有柱形
				{
					data: groupData.map(item => item.hope_salary),
					type: 'bar',
				},
				{
					data: groupData.map(item => item.salary),
					type: 'bar',
				},
			],
		}
		myEcharts.setOption(option)
	}
	salaryGroup(groupData[1])
	// 切换组员
	const btns = document.getElementById('btns')
	btns.addEventListener('click', e => {
		if (e.target.tagName === 'BUTTON') {
			;[].slice.call(btns.children).forEach(item => {
				item.classList.remove('btn-blue')
			})
			e.target.classList.add('btn-blue')
			salaryGroup(groupData[e.target.innerHTML])
		}
	})
	// 男女薪资分布
	function salaryGenderEcharts(salaryData) {
		const myEcharts = echarts.init(document.getElementById('gender'))
		const option = {
			// title可以设置一个数组 给多个标题
			title: [
				{
					text: '男女薪资分布',
					top: '3%',
					left: '4%',
				},
				{
					text: '男生',
					left: 'center',
					top: '45%',
				},
				{
					text: '女生',
					left: 'center',
					top: '85%',
				},
			],
			tooltip: {
				trigger: 'item',
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				show: false,
			},
			color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
			series: [
				{
					name: 'Access From',
					type: 'pie',
					radius: ['25%', '35%'],
					// 圆心的位置
					center: ['50%', '30%'],
					data: salaryData.map(item => {
						return {
							value: item.b_count,
							name: item.label,
						}
					}),
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
				{
					name: 'Access From',
					type: 'pie',
					radius: ['25%', '35%'],
					center: ['50%', '70%'],
					data: salaryData.map(item => {
						return {
							value: item.g_count,
							name: item.label,
						}
					}),
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		}
		myEcharts.setOption(option)
	}
	salaryGenderEcharts(salaryData)
	// 地图分布
	function provinceEcharts(provinceData) {
		const myEcharts = echarts.init(document.getElementById('map'))
		const dataList = [
			{ name: '南海诸岛', value: 0 },
			{ name: '北京', value: 0 },
			{ name: '天津', value: 0 },
			{ name: '上海', value: 0 },
			{ name: '重庆', value: 0 },
			{ name: '河北', value: 0 },
			{ name: '河南', value: 0 },
			{ name: '云南', value: 0 },
			{ name: '辽宁', value: 0 },
			{ name: '黑龙江', value: 0 },
			{ name: '湖南', value: 0 },
			{ name: '安徽', value: 0 },
			{ name: '山东', value: 0 },
			{ name: '新疆', value: 0 },
			{ name: '江苏', value: 0 },
			{ name: '浙江', value: 0 },
			{ name: '江西', value: 0 },
			{ name: '湖北', value: 0 },
			{ name: '广西', value: 0 },
			{ name: '甘肃', value: 0 },
			{ name: '山西', value: 0 },
			{ name: '内蒙古', value: 0 },
			{ name: '陕西', value: 0 },
			{ name: '吉林', value: 0 },
			{ name: '福建', value: 0 },
			{ name: '贵州', value: 0 },
			{ name: '广东', value: 0 },
			{ name: '青海', value: 0 },
			{ name: '西藏', value: 0 },
			{ name: '四川', value: 0 },
			{ name: '宁夏', value: 0 },
			{ name: '海南', value: 0 },
			{ name: '台湾', value: 0 },
			{ name: '香港', value: 0 },
			{ name: '澳门', value: 0 },
		]
		dataList.forEach(item => {
			provinceData.find(element => {
				// if (element.name.indexOf(item.name) === 0) {
				// 	item.value = element.value
				// }
				if (element.name.includes(item.name)) {
					item.value = element.value
				}
			})
		})
		let option = {
			title: {
				text: '籍贯分布',
				top: 10,
				left: 10,
				textStyle: {
					fontSize: 16,
				},
			},
			tooltip: {
				trigger: 'item',
				formatter: '{b}: {c} 位学员',
				borderColor: 'transparent',
				backgroundColor: 'rgba(0,0,0,0.5)',
				textStyle: {
					color: '#fff',
				},
			},
			visualMap: {
				min: 0,
				max: 6,
				left: 'left',
				bottom: '20',
				text: ['6', '0'],
				inRange: {
					color: ['#ffffff', '#0075F0'],
				},
				show: true,
				left: 40,
			},
			geo: {
				map: 'china',
				roam: false,
				zoom: 1.0,
				label: {
					normal: {
						show: true,
						fontSize: '10',
						color: 'rgba(0,0,0,0.7)',
					},
				},
				itemStyle: {
					normal: {
						borderColor: 'rgba(0, 0, 0, 0.2)',
						color: '#e0ffff',
					},
					emphasis: {
						areaColor: '#34D39A',
						shadowOffsetX: 0,
						shadowOffsetY: 0,
						shadowBlur: 20,
						borderWidth: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)',
					},
				},
			},
			series: [
				{
					name: '籍贯分布',
					type: 'map',
					geoIndex: 0,
					data: dataList,
				},
			],
		}
		myEcharts.setOption(option)
	}
	provinceEcharts(provinceData)
}
